<template>
  <div class="iconlistContainer">
    <swiper :options="swiperOption" v-if="ShowList">
      <swiper-slide v-for="(page,i) in pages" :key="i">
        <div class="item" v-for="item in page" :key="item.id">
          <img :src="item.imgUrl" />
          <p>{{item.desc}}</p>
        </div>
      </swiper-slide>
      <div class="swiper-pagination" slot="pagination"></div>
    </swiper>
    <p class="bottom">
      <span class="one">
        <i class="fa fa-map-marker"></i>
        定位失败
      </span>
      <span class="two">
        <i class="fa fa-globe"></i>
        必玩榜单
      </span>
    </p>
  </div>
</template>
<script>
export default {
  data () {
    return {
      swiperOption: {
        autoplay: false,
        loop: true
      }
    }
  },

  computed: {
    pages () {
      const pages = []
      this.iconlist.forEach((item, i) => {
        const page = Math.floor(i / 8);
        if (!pages[page]) {
          pages[page] = []
        }
        pages[page].push(item)
      })
      return pages
    },
    ShowList() {
      return this.iconlist.length
    }
  },
  props:["iconlist"]
}
</script>
<style lang="less" scoped>
@baseFontSize: 100px;
.iconlistContainer {
  background: #fff;
  .item {
    margin-top: 10px;
    float: left;
    width: 25%;
    text-align: center;
    img {
      width: 50rem / @baseFontSize;
      height: 50rem / @baseFontSize;
    }
  }
  font-size: 12rem / @baseFontSize;
  .bottom {
    height: 40rem / @baseFontSize;
    width: 100%;
    display: flex;
    margin-top: 20rem / @baseFontSize;
    border-top: 1px solid #e0e0e0;
    span {
      text-align: center;
      width: 50%;
      line-height: 30rem / @baseFontSize;
      display: inline-block;
      font-size: 15rem / @baseFontSize;
    }
  }
}
</style>
